import React, { PropTypes, PureComponent } from 'react';
import { autobind } from 'core-decorators';
import { Button, Modal, Form, Input, Select, DatePicker } from 'antd';
import { connect } from 'react-redux';
import moment from 'moment';

import styles from './addtra.less';

const FormItem = Form.Item;
const Option = Select.Option;
const dateFormat = 'YYYYMMDD';
const nowDate = new Date();
// moment().format('YYYYMMDD')
const CollectionCreateForm = Form.create()(
	(props) => {
		const { visible, onCancel, onCreate, form } = props;
		const { getFieldDecorator } = form;

		return (
			visible ?
				<Modal
					className={`${styles.addTradeItem} add-panel`}
					visible={visible}
					title="新增数据"
					okText="提交"
					onCancel={onCancel}
					onOk={onCreate}
				>
					<Form layout="vertical">
						<FormItem label="交易日期">
							{getFieldDecorator('tradeDay',{
								rules: [
								  { required: true, message: '请选择时间!' },
								],
									initialValue: moment(nowDate),
							})(
								<DatePicker format={dateFormat} />,
								)}
						</FormItem>
						<FormItem label="基金号">
							{getFieldDecorator('fundId', {
								rules: [
									{ whitespace: true, pattern: /^[1-9]\d*|0$/, message: '请输入数字!' },
									{ required: true, whitespace: true, message: '请输入基金号!' },
								],
							})(
								<Input />,
								)}
						</FormItem>
						<FormItem label="组合号">
							{getFieldDecorator('combiNo', {
								rules: [
									{ whitespace: true, pattern: /^[1-9]\d*|0$/, message: '请输入数字!' },
									{ required: true, whitespace: true, message: '请输入组合号!' },
								],
							})(
								<Input />,
								)}
						</FormItem>
						<FormItem label="实例号">
							{getFieldDecorator('instanceId', {
								rules: [
									{ whitespace: true, pattern: /^[1-9]\d*|0$/, message: '请输入数字!' },
									{ required: true, whitespace: true, message: '请输入实例号!' },
								],
							})(
								<Input />,
								)}
						</FormItem>
						<FormItem label="证券名称">
							{getFieldDecorator('stockCode', {
								rules: [
									{ whitespace: true, pattern: /^[0-9a-zA-Z].*\.CF$/, message: '请输入数字和字母,(.CF结尾)!' },
									{ required: true, whitespace: true, message: '请输入证券名称!' },
								],
							})(
								<Input />,
								)}
						</FormItem>
						<FormItem label="交易类型">
							{getFieldDecorator(
								'tradeDirection',
								{
									rules: [
										{ required: true, message: '请选择您的交易类型' },
									],
								})(
									<Select placeholder="请选择您的交易类型">
										<Option value="BuyOpen">买入开仓</Option>
										<Option value="SellOpen">卖出开仓</Option>
										<Option value="BuyClose">买入平仓</Option>
										<Option value="SellClose">卖出平仓</Option>
									</Select>,
								)}
						</FormItem>
						<FormItem label="平均基差">
							{getFieldDecorator('avgBasisSpread', {
								rules: [
									{ pattern: /^[-]?\d+(?:\.\d+)?$/, whitespace: true, message: '请输入数字!' },
									{ required: true, whitespace: true, message: '请输入平均基差!' },
								],
							})(
								<Input />,
								)}
						</FormItem>
						<FormItem label="数量">
							{getFieldDecorator('dealAmount', {
								rules: [
									{ pattern: /^[-]?\d+(?:\.\d+)?$/, whitespace: true, message: '请输入数字!' },
									{ required: true, whitespace: true, message: '请输入数量!' },
								],
							})(
								<Input />,
								)}
						</FormItem>
						<FormItem
							label="汇总类型"
						>
							{getFieldDecorator(
								'tradeType',
								{
									rules: [
										{
											required: true, message: '请选择您的汇总类型',
										},
									],
								},
							)(
								<Select placeholder="请选择您的汇总类型">
									<Option value="Transfer">划转</Option>
									<Option value="Trade">交易</Option>
								</Select>,
								)}
						</FormItem>
						<FormItem
							label="备注"
						>
							{getFieldDecorator(
								'note',
								{},
							)(
								<Input type="textarea" rows={1} />,
							)}
						</FormItem>
					</Form>
				</Modal> : null
		);
	},
);
const mapStateToProps = state => ({
	list: state.trade.list,
	page: state.trade.page,
});
const mapDispatchToProps = {
	getAdd: query => ({
		type: 'trade/getAdd',
		payload: query || {},
	}),
};

@connect(mapStateToProps, mapDispatchToProps)
class Addtra extends PureComponent {

	static propTypes = {
		form: PropTypes.object.isRequired,
		getAdd: PropTypes.func.isRequired,
	}

	constructor(props) {
		super(props);
		this.state = {
			visible: false,
			modalHeight: 0,
		};
	}

	componentDidUpdate() {
		const screenHeight = Math.max(document.documentElement.offsetHeight, document.body.offsetHeight);
		const ele = document.querySelector('.add-panel .ant-modal-body');
		if (ele) {
			ele.style.height = `${screenHeight * 0.7}px`;
		}
	}

	@autobind
	showModal() {
		this.setState({ visible: true });
	}

	@autobind
	handleCancel() {
		this.setState({ visible: false });
	}

	@autobind
	handleCreate() {
		const form = this.form;
		const {   begindate, enddate, getAdd } = this.props;
		console.log('props>>>>>>',this.props);
		form.validateFields((err, values) => {
			if (err) {
				return;
			}
			values.avgBasisSpread = +values.avgBasisSpread;
			values.dealAmount = +values.dealAmount;
			console.log('Received values of form:>>>', values);
			form.resetFields();
			this.setState({ visible: false });
			const selectDate = moment(values.tradeDay).format('YYYYMMDD');
			values.tradeDay = selectDate

			getAdd({
				...values,
				tradeDay: selectDate,
				begindate,
				enddate
			});
		});
	}

	@autobind
	saveFormRef(form) {
		this.form = form;
	}

	render() {
		const { list, page } = this.props;
		return (
			<div className={styles.addButtonWrapper}>
				<Button type="primary" onClick={this.showModal} >新增</Button>
				<CollectionCreateForm
					list={list}
					page={page}
					ref={this.saveFormRef}
					visible={this.state.visible}
					onCancel={this.handleCancel}
					onCreate={this.handleCreate}
				/>
			</div>
		);
	}
}
export default Form.create({
})(Addtra);
